<template>
  <div class="page">
    <m-header :title="langText&&langText.recharge" :canback="Boolean(1)">
        <span class="top" @click="$router.push({name:'CenterRecord',query:{type:'cz'}})">{{langText&&langText.rechargerecord}}</span>
    </m-header>
      <div class="body">
          <div class="box">
              <img :src="inviteSrc" alt="">
              <p>{{langText&&langText.myqrcode}}</p>
          </div>
          <div class="bot">
            <p>{{langText&&langText.note}}:{{langText&&langText.notecontent}}</p>
            {{langText&&langText.walletaddress}}:
            <input type="text" :value="cash_url"  class="inp_url" id="url" readonly >
            <button ref="copy" class="btn btn-copy" data-clipboard-target="#url" data-clipboard-action="copy" @click="copy">{{langText&&langText.copy}}</button>
          </div>
          <div class="ts">
            {{langText&&langText.czts}}
          </div>
      </div>
    <m-load ref="load"></m-load>
    <m-Footer></m-Footer>
  </div>
</template>
<script>
import QRCode from "qrcode";
import { Util, Load } from "@/assets/commonjs/utils.js";
import { Init, Base, Owner } from "@/server/server.js";
import { mapGetters } from "vuex";
import Clipboard from 'clipboard';
import { MyTxt } from "@/assets/commonjs/lan.js";
export default {
  data() {
    return {
        allTxt:null,
        inviteSrc: null,
        inviteUrl: null,
        myClipboard:null,
        cash_url:null,
        langText:null,
        img: require("@/assets/images/hzlz/my_icon_wdzc.png"),
    }
  },
  computed: {
    ...mapGetters(["uid", "userInfo", "api","lang",'getLangId'])
  },
  created() {
      
  },
  mounted(){
    this.initData();
    this.myAssets();
    // setTimeout(() => {
      
    // // console.log(this.inviteUrl)
    // }, 1000);
    
  },
  methods: {
      
    initData() {
      this.langText = Object.assign({},JSON.parse(localStorage.getItem('mineData')))
      this.inviteUrl = this.userInfo.credit2_url;
      this.allTxt = Object.assign({},MyTxt)
      this.myClipboard = new Clipboard(this.$refs['copy']);
    },
    myAssets(){
      Owner.myAssets().then(res=>{
        if(res.code==1){
          this.cash_url = res.data.credit2_url;
          this.inviteUrl = res.data.credit2_url;
          this.setCode(this.inviteUrl);
        }else{
          mui.toast(res.msg)
        }
      })
    },
    setCode(url) {
      if(!url) return;
      QRCode.toDataURL(url)
        .then(url => {
          console.log(url)
          this.inviteSrc = url;
        })
        .catch(err => {
          console.error(err);
        });
    },
    copy(){
        this.myClipboard.on('success',(e)=>{
            mui.toast(this.langText&&this.langText.copysuccess);
        })
        this.myClipboard.on('error',(e)=>{
            Util.commonCopy('url');
        })
    }
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  // padding: @margin-primary;
  background-color: @bg-color;
  .box{
        background-color: #fff;
        padding: 90px 135px 0;
        width: 640px;
        height: 560px;;
        margin-left: 55px;
        margin-top: 150px;
        img{
            width: 366px;
        }
        p{
            text-align: center;
            font-size:32px;
            font-weight:550;
            color:rgba(51,51,51,1);
            margin-top: 16px;
        }
  }
  .bot{
        background-color: #fff;
        width: 640px;
        // height: 96px;
        line-height: 96px;
        text-align: center;
        margin-left: 55px;
        border-top: 1px solid #ddd;
        padding: 0 30px;
        font-size:24px;
        color:rgba(153,153,153,1);
        p{
          font-size:24px;
          color:rgba(153,153,153,1);
        }
        .inp_url{
          border: none;
          display: inline-block;
          width: auto;
          margin: 0;
          padding: 0;
          height: 30px;
        }
        .btn-copy{
          width: 100%;
          background-color: #4eb6ad;

        }
  }
}

  .top{
      position: absolute;
      right: 30px;
      top: 0;
      color: #666666;
      font-size:24px;
  }
  
  .ts{
          width: 620px;
          font-size:24px;
          color:rgba(153,153,153,1);
          margin-left: 75px;
          margin-top: 20px;
  }
.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
  }
}
</style>